<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部 -->
      <el-header style="background-color: #1b4989; color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-icon="ArrowRight" style="margin: 10px">
          <el-breadcrumb-item :to="{ path: '/TenantHome' }" style="color: white;">首页</el-breadcrumb-item>
          <el-breadcrumb-item style="color: white;">查看房源</el-breadcrumb-item>
        </el-breadcrumb>
             
        <!-- 搜索功能 -->
        <div style="display: flex; align-items: right; gap: 10px;">
          <el-input v-model="search" placeholder="请输入搜索内容" style="width: 300px;"/>
          <el-button @click="SearchHouse" type="primary" plain icon="Search">搜索</el-button>
          <el-button @click="ResetSearch" type="info" plain icon="Refresh">重置</el-button>
        </div>
        <el-button @click="SignOut" type="info" size="medium" plain icon="Avatar">退出登录</el-button>
      </el-header>

      <!-- 主要内容 -->
      <el-main>
        <div style="display: flex; font-weight: bold; font-family: Microsoft YaHei; font-size: 20px; margin-top: 0%;">
          房源列表
          <div class="line" style="margin-left: 1.5%; margin-top: 1%;"></div>
        </div>
        <div style="display: flex; flex-wrap: wrap; gap: 20px;">
          <div v-if="displayData.length === 0" style="position: relative; left: 47.5%; margin-top: 8%;">
            暂无数据
          </div>
          <!-- 将v-for移到el-card上，确保每个数据项都有独立的卡片 -->
          <el-card 
            v-else 
            v-for="item in displayData" 
            :key="item.houseId"
            shadow="hover" 
            style="margin-top: 2%; margin-left: 5%; width: calc(90% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;"
          >
            <div class="common-layout">
              <el-container>
                <el-aside width="200px">
                  <el-image :src="item.imageUrl" fit="fill" style="width: 100%; height: 100%"></el-image>
                </el-aside>
                <el-container>
                  <el-header style="position: relative; padding-right: 80px;">
                    <router-link 
                      :to="{ name: 'HouseDisplay', query: { houseId: item.houseId } }" 
                      style="font-family: Microsoft YaHei; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
                    >
                      {{ item.title }}：{{ item.address }}
                    </router-link>
                    <el-tag
                      :type="getStatusTagType(item.status)"
                      effect="dark"
                      size="medium" 
                      style="width: auto; height: 30px; position: absolute; right: 0; top: 20%; transform: translateY(-40%); font-weight: bolder ; font-size: 14.5px; white-space: nowrap;"
                    >
                      {{ getStatusLabel(item.status) }}
                    </el-tag>
                  </el-header>
                  <el-main style="margin-top: -5%;">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ item.description }}
                  </el-main>
                </el-container>
              </el-container>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script src="@/assets/js/SelectHouse.js"></script>

<!--注意######样式的优先级受Element plus影响，部分 Element 组件内部使用了自己定义的颜色值，而不是继承父级，需要显示设置####-->
<style scoped>
@import '../assets/css/AdminHome.css';
:deep(.el-breadcrumb__item .el-breadcrumb__inner)
 {
  color
: white !important;
}

.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
}

</style>